$(function () {
    let layer = layui.layer
    let form = layui.form

    // 封装获取链接列表函数
    getLink()
    function getLink() {
    //  发送ajax ,获取列表
        $.ajax({
            url: 'admin/links',
            success: function (res) {
                // console.log(res);
                if (res.status !== 0) {
                  return layer.msg('获取链接信息失败！')
                }
                // 使用模板引擎，将数据和模板结合
                let htmlstr = template('linkStr',res)
                $('#tb').html(htmlstr)
            }
        })
    }

    // 添加友情链接
    $('#addLink').on('click', function () {
    //  弹出窗口
        let index = layer.open({
            title: '添加友情链接',
            type: 1,
            area:'500px',
            content: $('#addlinkStr').html()
        });
        // 上传图片
        $('.uploadsBtn').on('click', function () {
            $('#linkfile').click()
        })

        // 监听文件上传，change事件
        
        $('#linkfile').on('change', function () {
            // 获取用户选择的图片
           let file = this.files[0]
            //  创建用户选择的图片的地址
            let objectURL = URL.createObjectURL(file)
            // 将图片传到页面上
            $('#imgBox').attr('src', objectURL)
        })

        // 点击提交按钮，发送Ajax添加友情链接
        $('#addLinks').on('submit', function (e) {
            e.preventDefault()
             // 获取表单数据
            let fd = new FormData(this)
           
            // fd.forEach(function (v, k) {
            //   console.log(v,k);
            //   });

            // 发送ajax 
            $.ajax({
                url: 'admin/links',
                type: 'POST',
                data: fd,
                contentType: false,
                processData: false,
                success: function (res) {
                    // console.log(res);
                    if (res.status !== 0) {
                      return layer.msg('添加友情链接失败!')
                    }
                    // 添加成功
                    // 关闭弹出页面
                    layer.close(index)
                    // 重新获取列表
                    getLink()
                }
            })
        })
    
    })


    // 删除功能

    $('#tb').on('click', '.delBtn', function () {
        // 弹出页面
        // 获取id值
        let id = $(this).attr('data-id')

        layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){
        // 发送Ajax
        $.ajax({
            url: 'admin/links/' + id,
            type: 'DELETE',
            success: function (res) {
                if (res.status !== 0) {
                 return layer.msg('删除友情链接失败')
                }
            // 重新获取列表
                getLink()
            // 关闭弹出框
                layer.close(index);
            }
         })
     });    
    })


    // 编辑功能

    $('#tb').on('click', '.editBtn', function () {
        
        // 弹出页面
         let index = layer.open({
            title: '编辑友情链接',
            type: 1,
            area:'500px',
            content: $('#editlinkStr').html()
         });
        
        // 获取编辑id
        let id = $(this).attr('data-id')
         
        // 发送ajax 获取友情链接详情
        $.ajax({
            url: 'admin/links/' + id,
            success: function (res) {
                console.log(res);
                if (res.status !== 0) {
                  return layer.msg('获取链接失败')
                }
                $('#img').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon) 
                delete res.data.linkicon
                form.val("formLink", res.data)  
            }
        })

        // 上传图片
        $('.uploadsBtn').on('click', function () {
            $('#linkfile').click()
        })

        // 监听文件上传，change事件
        
        $('#linkfile').on('change', function () {
            // 获取用户选择的图片
           let file = this.files[0]
            //  创建用户选择的图片的地址
            let objectURL = URL.createObjectURL(file)
            // 将图片传到页面上
            $('#imgBox').attr('src', objectURL)
        })
        

        $('#editLinks').on('submit', function (e) {
            e.preventDefault()
            // 获取数据
            let fd = new FormData(this)
            // 发送Ajax，编辑友情链接
           $.ajax({
               url: 'admin/links/' + id,
               type: 'PUT',
               data: fd,
               contentType: false,
               processData:false,
               success: function (res) {
                   if (res.status !== 0) {
                     return layer.msg('编辑链接失败')
                   }
                   //成功
                  //关闭弹窗
                   layer.close(index)
                  // 重新获取列表
                   getLink()

            }
         })
        
        })

       
    })
})